<template>
  <div class="footer">
    <span class="todo-count">共{{ lastLength }}条完成任务</span>
    <ul class="filters">
      <li> <a href="#" :class="{ selected:status == '所有' }" 
        @click="emit('updateStatus','所有')">所有</a></li>
      <li> <a href="#" :class="{ selected:status == '待办' }"
        @click="emit('updateStatus','待办')">待办</a></li>
      <li> <a href="#" :class="{ selected:status == '完成' }"
        @click="emit('updateStatus','完成')">完成</a></li>
    </ul>
  </div>
</template>

<script setup>
const props = defineProps(["lastLength","status"])
const emit = defineEmits(["updateStatus"])
</script>

<style>
.footer{
  text-align: center;
  padding: 10px 20px;
  font-size: 15px;
}
.todo-count{
  float: left;
  position: relative;
  top:10px;
  font-size: 20px;
}
.filters{
  list-style: none;
  float: right;
}
.filters li{
  display: inline;
}
.filters li a{
  margin-left: 20px;
  text-decoration: none;
  display: inline-block;
  border: 1px solid black;
  width:70px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  color: black;
  font-weight: bold;
}
.filters li a:hover{
  color: red;

}

.filters li a.selected{
  border-color: aqua;
  background-color:rgb(0, 255, 106);
  color: yellow;
}
</style>